// 簿记转仓页面
import React from 'react';
import { connect } from 'dva';
import { FirstHeaderC, PrimaryGhostC, PrimaryC } from '../../../comps';
import { Menu, message } from 'antd';
import style from './style.less';
import BondTrade from './rollOver/bondTrade';
import BuybackTrade from './rollOver/buybackTrade';
import DepositTrade from './rollOver/depositTrade';
import FinaFlockingTrade from './rollOver/finaFlockingTrade';
import FundTrade from './rollOver/fundTrade';
import NonstandardTrade from './rollOver/nonstandardTrade';
import StockTrade from './rollOver/stockTrade';
import RollInOut from './rollInOut';
const MenuItem = Menu.Item;
class RollOverdetail extends React.Component {
  child = [];
  state = {
    memu: [
      { code: '0', value: '债券' }, // 左侧导航
      { code: '1', value: '基金' },
      { code: '2', value: '回购' },
      { code: '3', value: '理财直融' },
      { code: '4', value: '存款' },
      { code: '5', value: '非标' },
      { code: '6', value: '股票' },
    ],
    selMenuItem: '0', // 默认选中第一条
    tradingcode: undefined, // 证券代码
    exchangecode: undefined, // 交易市场
    depositData: undefined, // 存款数据
  };

  componentDidMount() {}

  // “保存”
  onOk = () => {
    const { selMenuItem } = this.state;
    const tradeData = this.child[selMenuItem].getInfo();
    const rollInData = this.rollIn.getInfo();
    const rollOutData = this.rollOut.getInfo();
    if (tradeData && rollInData && rollOutData) {
      if (rollInData.portfolioidIn == rollOutData.portfolioidOut) {
        message.error('不能选择同一个组合');
        return;
      }
      if (selMenuItem == 0) {
        // 债券
        if (rollInData.currentAsset.t1 < tradeData.fullPrice || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (rollOutData.holdAmount.available < tradeData.orderQty || rollOutData.holdAmount.available == undefined) {
          message.error('转出持仓可用数量不足');
          return;
        }
      }
      if (selMenuItem == 1) {
        // 基金
        if (rollInData.currentAsset.t1 < tradeData.zlprice || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (rollOutData.holdAmount.available < tradeData.amount || rollOutData.holdAmount.available == undefined) {
          message.error('转出持仓可用数量不足');
          return;
        }
      }
      if (selMenuItem == 2) {
        // 回购
        if (rollInData.currentAsset.t1 < tradeData.repurchaseAmount || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
      }
      if (selMenuItem == 3) {
        // 理财直融
        if (rollInData.currentAsset.t1 < tradeData.parValueTotalqj || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (rollOutData.holdAmount.available < tradeData.amount || rollOutData.holdAmount.available == undefined) {
          message.error('转出持仓可用数量不足');
          return;
        }
      }
      if (selMenuItem == 4) {
        // 存款
        if (rollInData.currentAsset.t1 < tradeData.bankDepositBalance || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (this.state.depositData.bankDepositBalance < tradeData.bankDepositBalance) {
          message.error('转出金额不足');
          return;
        }
      }
      if (selMenuItem == 5) {
        // 非标
        if (rollInData.currentAsset.t1 < tradeData.parValueTotal || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (rollOutData.holdAmount.available < tradeData.amount || rollOutData.holdAmount.available == undefined) {
          message.error('转出持仓可用数量不足');
          return;
        }
      }
      if (selMenuItem == 6) {
        // 股票
        if (rollInData.currentAsset.t1 < tradeData.totalPrice || rollInData.currentAsset.t1 == undefined) {
          message.error('转入T+1可用资金不足');
          return;
        }
        if (rollOutData.holdAmount.available < tradeData.realOrderQty || rollOutData.holdAmount.available == undefined) {
          message.error('转出持仓可用数量不足');
          return;
        }
      }
      let query = tradeData;
      query.productidIn = rollInData.productidIn;
      query.portfolioidIn = rollInData.portfolioidIn;
      query.productidOut = rollOutData.productidOut;
      query.portfolioidOut = rollOutData.portfolioidOut;
      if (selMenuItem == 4) {
        query.bankId = this.state.depositData.pid;
        query.totalMoney = this.state.depositData.bankDepositBalance;
      }
      this.rollOverOk(query);
    }
  };
  // 转仓
  rollOverOk = (query) => {
    this.props.dispatch({
      type: 'rollOverM/rollOver' + this.state.selMenuItem,
      payload: {
        ...query,
      },
      callback: (success) => {
        if (success) {
          this.props.onRefresh();
        }
      },
    });
  };
  // “取消”
  onCancel = () => {
    this.props.onClose();
  };
  // 响应要素证券代码改变
  tradingCodeOnChange = (e) => {
    if (e) {
      this.setState({
        tradingcode: e.tradingCode,
        exchangecode: e.exchangeCode,
      });
    } else {
      this.setState({
        tradingcode: undefined,
        exchangecode: undefined,
      });
    }
  };
  // 响应存款双击点击事件
  depositData = (data, type) => {
    if (type == 1) {
      this.setState({
        depositData: undefined,
      });
    } else {
      if (data) {
        this.setState({
          depositData: data,
        });
      } else {
        this.setState({
          depositData: undefined,
        });
      }
    }
  };
  showTable = () => {
    const { selMenuItem } = this.state;
    switch (selMenuItem) {
      case '0':
        return <BondTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '1':
        return <FundTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '2':
        return <BuybackTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '3':
        return <FinaFlockingTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '4':
        return <DepositTrade tradingCodeOnChange={this.tradingCodeOnChange} depositInfo={this.state.depositData} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '5':
        return <NonstandardTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
      case '6':
        return <StockTrade tradingCodeOnChange={this.tradingCodeOnChange} onRef={(ref) => (this.child[selMenuItem] = ref)} />;
    }
  };

  render() {
    let { selMenuItem, memu, tradingcode, exchangecode } = this.state;
    return (
      <div>
        <FirstHeaderC title='簿记管理转仓' />
        <div className={style.rollOver}>
          {/* 左侧导航 */}
          <div className={style.left} style={{ height: 'calc(100vh - 170px)' }}>
            <Menu
              mode='inline'
              defaultSelectedKeys={[selMenuItem]}
              onClick={(val) => {
                this.setState({
                  selMenuItem: val.key,
                });
              }}
            >
              {memu &&
                memu.map((item) => (
                  <MenuItem key={item.code} value={item.code}>
                    {item.value}
                  </MenuItem>
                ))}
            </Menu>
          </div>
          {/* 交易要素 */}
          <div className={style.centre}>
            <FirstHeaderC title='交易要素' />
            <div style={{ marginTop: '20px' }}>
              {/* 根据导航，展示内容 */}
              {this.showTable()}
            </div>
          </div>
          {/* 右侧内容区 */}
          <div className={style.right} style={{ width: 'calc(100% - 470px)', maxHeight: 'calc(100vh - 170px)' }}>
            <FirstHeaderC title='转入' />
            <div className={style.rightTop}>
              {/* 转入产品 */}
              <RollInOut
                type={selMenuItem}
                direction={1}
                tradingcode={tradingcode}
                exchangecode={exchangecode}
                tradingCodeOnChange={this.tradingCodeOnChange}
                depositData={this.depositData}
                onRef={(ref) => (this.rollIn = ref)}
              />
            </div>
            <FirstHeaderC title='转出' />
            <div className={style.rightTop}>
              {/* 转出产品 */}
              <RollInOut
                type={selMenuItem}
                direction={2}
                tradingcode={tradingcode}
                exchangecode={exchangecode}
                depositData={this.depositData}
                tradingCodeOnChange={this.tradingCodeOnChange}
                onRef={(ref) => (this.rollOut = ref)}
              />
            </div>
            <div className={style.rightBottom}>
              <PrimaryC title='确定' onClick={this.onOk} loading={this.props.loading.effects['rollOverM/rollOver' + selMenuItem] == true} />
              <PrimaryGhostC title='取消' onClick={this.onCancel} style={{ marginLeft: '15px' }} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(({ rollOverM, loading }) => ({ rollOverM, loading }))(RollOverdetail);
